<template>
  <div>
    <!-- 头部是子传父 -->
    <nav-header @add='add'></nav-header>
    <!-- 主体和底部是父传子 -->
    <nav-main :list='list' @del='del'></nav-main>
    <nav-footer :list='list' @clear='clear'></nav-footer> 
  </div>
    
</template>
<script>
import navHeader from '@/components/navHeader/navHeader'
import navMain from '@/components/navMain/navMain'
import navFooter from '@/components/navFooter/navFooter'
import {defineComponent,ref,computed} from 'vue'
import { useStore} from 'vuex'
export default defineComponent({
  name:'Home',
  components:{
    navHeader,
    navMain,
    navFooter,
  },
    setup(){
      //navMain数据(拿到vuex中定义的值)父传子动态绑定
      let store=useStore();
      let list=computed(()=>{
        return store.state.list
      })
      //navHeader数据
     let value=ref('');
        //添加操作
     let add=(val)=>{
      value.value=val;
      //先判断有没有存在的任务,如果任务存在,不能重复添加
      let flag=true
      list.value.map((item)=>{
        if(item.title===value.value){
          //有重复任务
          flag=false
          alert('任务已存在')
        }
      })
      //调用mutation
      //没有重复的
     if(flag){
       store.commit('addTodo',{
        title:value.value,
        complete:false
      })
     }
      console.log(val);
     }
      //删除操作
      let del=(val)=>{
        //调用删除的mutation
        store.commit('delTodo',val)
        console.log(val);
      }
      //清除已完成
      let clear=(val)=>{
          store.commit('clear',val)
      }
     return {
        add,
        value,
        //navMain
        list,
        del,
        clear
        
     }
    }
  })
</script>
<style scoped lang='scss'>

</style>
